{include file="public/head"/}
<script src="/static/Admin/js/vue.js"></script>
<style>
    table {
        text-align: center;
    }

    table th {
        text-align: center;
    }
</style>
<div class="container-fluid" id="getlist">
    <div class="row clearfix" id="search-box" style="margin-top:0">
        <div class="col-md-12 column text-right">
            <div class="form-inline" style="text-align: right;">
                <div class="form-group">
                    <input type="text" class="form-control" v-model="dname" @keyup.13="render" value=""
                           placeholder="{:lang('please_enter_the_job_name')}" v-focus>
                </div>
                <div class="form-group">
                    <button type="button" class="btn btn-default" @click="render">{:lang('search')}</button>
                </div>
            </div>
        </div>
    </div>
    <div class="row clearfix">
        <div class="col-md-12 column">
            <div class="alert alert-dismissable alert-info">
                <button type="button" class="close">×</button>
                <p></p>
            </div>
        </div>
    </div>
    <div class="ntDesktop">
        <div class="ntDesktop-head">{:lang('job_setting')}</div>
        <div class="row clearfix" style="padding-top:12px">
            <div class="col-md-6 column">
                <ul class="nav nav-tabs">
                    <li class="active">
                        <a href="#home" data-toggle="tab" class="zhlang"
                           @click="countrychange('0')">{:lang('global')}</a>
                    </li>
                    <li>
                        <a href="#home" data-toggle="tab" class="enlang"
                           @click="countrychange('1')">{:lang('BRAZIL')}</a>
                    </li>
                    <li>
                        <a href="#home" data-toggle="tab" class="ptlang" id="list-normal"
                           @click="countrychange('2')">{:lang('CHINA')}</a>
                    </li>
                </ul>
            </div>
            <div class="col-md-6 column">
                <ul class="nav nav-tabs">
                    <li class="active">
                        <a href="#home" data-toggle="tab" class="zhlang" data-lang="zh" @click="langchange('zh')">{:lang('Chinese')}</a>
                    </li>
                    <li>
                        <a href="#home" data-toggle="tab" class="enlang" data-lang="en" @click="langchange('en')">{:lang('English')}</a>
                    </li>
                    <li>
                        <a href="#home" data-toggle="tab" class="ptlang" data-lang="pt" id="list-normal"
                           @click="langchange('pt')">{:lang('Portuguese')}</a>
                    </li>
                </ul>
            </div>
            <div class="col-md-12  column text-right" style="margin-top: 5px;">
                <div class="form-inline">
                    <a href="{:url('organization/positionadd')}" type="button"
                       class='btn btn-sm btn-primary option-recover' data-toggle="modal"
                       data-target="#myModal" onfocus="this.blur()">{:lang('add_job')}</a>
                </div>
            </div>
        </div>
        <div class="row clearfix" id="result_wrap">
            <div class="col-md-12 column">
                <table class="table table-striped table-hover ntTable" v-cloak>
                    <colgroup>
                        <col width="100">
                        <col>
                        <col>
                        <col>
                    </colgroup>
                    <thead style="text-align: center;">
                    <tr>
                        <th>{:lang('post_ID')}</th>
                        <th style="text-align: left;">{:lang('post_name')}</th>
                        <th>{:lang('number_of_employees')}</th>
                        <th>{:lang('operate')}</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="item in list" :key="item.id" v-if="list.length>0">
                        <td v-cloak>{{item.id}}</td>
                        <td v-cloak style="text-align: left;"><span v-html="item.level"
                                                                    style="-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;"></span>{{item.content}}
                        </td>
                        <td v-cloak>{{item.num}}</td>
                        <td style="text-align: right;">
                            <div>
                                <a :href="'/admin/Organization/positionedit?id='+item.id" type="button"
                                   class="btn btn-sm btn-primary option-recover" data-toggle="modal"
                                   data-target="#myModal" onfocus="this.blur()"><span
                                        class="glyphicon glyphicon-pencil"></span> {:lang('edit')}</a>
                                <a :href="'/admin/Organization/positionadds?id='+item.id" class='btn btn-sm btn-primary'
                                   data-toggle="modal" data-target="#myModal" onfocus="this.blur()"><span
                                        class="glyphicon glyphicon-plus"></span> {:lang('add_sub-post')}</a>
                                <a :href="'/admin/Organization/positionroot?id='+item.id" class='btn btn-sm btn-primary'
                                   data-toggle="modal" data-target="#position2menu_editModal"
                                   onfocus="this.blur()"><span
                                        class="fa fa-cogs"></span> {:lang('setting_permission')} </a>
                                <a :href="'/admin/Organization/positioncopy?id='+item.id" class='btn btn-sm btn-primary'
                                   data-toggle="modal" data-target="#myModal" onfocus="this.blur()"><span
                                        class="fa fa-copy"></span> {:lang('copy')} </a>
                                <a href="javascript:;" @click="delrole(item.id)"
                                   class="btn btn-sm btn-default option-clear" onfocus="this.blur()"><span
                                        class="glyphicon glyphicon-trash"></span>{:lang('delete')}</a>
                            </div>
                        </td>
                    </tr>
                    <tr v-if="list.length==0">
                        <td colspan="4">{:lang('no_data')}</td>
                    </tr>
                    </tbody>
                </table>
                <ul class="pagination" id="pagination">
                </ul>
            </div>
        </div>
    </div>
</div>
<!--弹窗部分 开始-->
<div class="modal fade" id="myModal"  data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog modal-lg"  role="document">
        <div class="modal-content"  style="width:1000px">
        </div>
    </div>
</div>

<!-- 设置权限弹窗 -->
<div class="modal fade" id="position2menu_editModal" tabindex="-1" role="dialog" aria-labelledby="ntModalLabel"
     aria-hidden="true" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog modal-lg">
        <div class="modal-content" style="width:1000px">
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<script>
    Vue.directive('focus', {
        bind: function (el) {
            el.focus()
        },
        inserted: function (el) {
            el.focus();//自动获取焦点
        },
    })
    var table = new Vue({
        el: '#getlist',
        data: {
            list: [],
            dname: '',
            page: 1,
            lang: 'zh',
            pageSize: 5,
            country_id: '0'
        },
        methods: {
            setPage(pageCurrent, pageSum) {
                //数据总条数
                var myPageCount = pageSum;
                //一页显示多少条
                var myPageSize = this.pageSize;
                //总页数
                var countindex = myPageCount % myPageSize > 0 ? (myPageCount / myPageSize) + 1 : (myPageCount / myPageSize);
                $.jqPaginator('#pagination', {
                    totalPages: parseInt(countindex),
                    //最多显示多少页
                    visiblePages: 5,
                    //默认显示第几页
                    currentPage: pageCurrent,
                    first: '<li class="first"><a href="javascript:;">' + langcon.page_home + '</a></li>',
                    prev: '<li class="prev"><a href="javascript:;"><i class="arrow arrow2"></i>' + langcon.previous_page + '</a></li>',
                    next: '<li class="next"><a href="javascript:;">' + langcon.next_page + '<i class="arrow arrow3"></i></a></li>',
                    last: '<li class="last"><a href="javascript:;">' + langcon.last_page + '</a></li>',
                    page: '<li class="page"><a href="javascript:;">{{page}}</a></li>',
                    all:'<li class="page"><a href="javascript:;">'+parseInt(countindex)+' / '+this.page+'PG , '+this.pageSize+' /PG</a></li>',
                    onPageChange: (num, type) => {
                        if (type == "change") {
                            this.page = num
                            this.getAllList()
                        }
                    }
                });
            },
            getAllList(){
                $.ajax({
                    url: "/admin/organization/position",
                    type: 'post',
                    data: {
                        page: this.page,
                        pageSize: this.pageSize,
                        dname: this.dname,
                        lang: this.lang,
                        country_id: this.country_id
                    },
                    dataType: "json",
                    success: (result) => {
                        this.list = result.getposition;
                        // 将数据渲染到页面
                        if (result.size / this.pageSize > 1) {
                            $('#pagination').show()
                            this.setPage(parseInt(this.page), result.size)
                        } else {
                            $('#pagination').hide()
                        }
                    }
                })
            },
            //国家点击
            countrychange(country_id){
                this.country_id = country_id;
                this.page = '1';
                this.getAllList();
            },
            render(){
                this.getAllList()
            },
            //语言点击
            langchange(lang){
                this.lang = lang;
                this.getAllList()
            },
            //删除职位
            delrole(id){
                $.ajax({
                    url: '/admin/Organization/positiondelete?id=' + id,
                    type: "post",
                    data: {emulateJSON: true},
                    success: result => {
                        var res = JSON.parse(result);
                        change_mes_type('.alert',res.status)
                        if (res.status != 1) {
                            $('.alert').show()
                            $('.alert p').html('*' + res.msg + '<br>')
                        } else {
                            $('.alert').show()
                            $('.alert p').html('*' + res.msg + '<br>')
                            if (!(this.list.length - 1)) {
                                    if(this.page>1){
                                        this.page--
                                    }
                            }
                            this.getAllList()
                        }
                    }
                })
            },
        },
        created(){
            this.getAllList()
            $('#myModal').on('hide.bs.modal', () => {
                this.getAllList()
            })
        }

    })
    $("#myModal").on("hidden.bs.modal", function () {
        $(this).removeData("bs.modal");
        $(".modal-content").children().remove();
        $(document).unbind('keydown')
    });
    $("#position2menu_editModal").on("hidden.bs.modal", function () {
        $(this).removeData("bs.modal");
        $(document).unbind('keydown')
    });
</script>
{include file="public/foot"/}